<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/backstage/css/font.css">
    <link rel="stylesheet" href="/backstage/css/xadmin.css">
</head>
<body style="width:100%;height:100%;">
    
     {if($type==1)}
  
     <div class="layui-upload">
        <button type="button" class="layui-btn" id="test2">多图片上传</button> 
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
          预览图：
          <div class="layui-upload-list" id="demo2"></div>
       </blockquote>
      </div>
     {else}
     <div style="width:90%;height:70%;" class="layui-upload-drag" id="test10"><i class="layui-icon"></i>
         <p>点击上传，或将文件拖拽到此处</p>
         <div id="uploadPatchForm"  style="display: none" class="roundRect">
                 <div  id="uploadLoadingDiv">
             <div class="layui-progress" lay-showpercent="true" lay-filter="demo" >
                         <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
                         </div>
                 </div>
         </div>
     </div>
     {/if}




</body>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/backstage/lib/layui/layui.js" ></script>

<script>
    
  layui.use('upload', function(){
  var $ = layui.jquery
    ,upload = layui.upload;

    //拖拽上传
    upload.render({
      elem: '#test10'
      ,accept: 'file' //普通文件
      ,exts: 'jpg|jpeg|png|gif' 
      ,url: '/backstage/resource/upload_image?folder_id={$folder_id}'
      ,xhr:xhrOnProgress
      ,progress:function(value){  //上传进度回调 value进度值
        console.log('val',value);
        element.progress('demo', value+'%')  //设置页面进度条
      }
      ,before: function(obj){
        layer.load(); //上传loading
      }
      ,done: function(res){
        if(res.code==200){
          
          parent.app.getListData();
          var index = parent.layer.getFrameIndex(window.name);
          //关闭当前frame
          parent.layer.close(index);
          parent.layer.msg("上传成功", {icon: 6,time:1200});

        }else{
          layer.msg('上传失败')
        }
      }
    });

    // //普通图片上传
    // var uploadInst = upload.render({
    //   elem: '#test12'
    //   ,url: '/backstage/image/upload_image'
    //   ,before: function(obj){
    //     //预读本地文件示例，不支持ie8
    //     obj.preview(function(index, file, result){
    //       $('#demo1').attr('src', result); //图片链接（base64）
    //     });
    //   }
    //   ,done: function(res){
    //     //如果上传失败
    //     if(res.code > 0){
    //       return layer.msg('上传失败');
    //     }
    //     //上传成功
    //   }
    //   ,error: function(){
    //     //演示失败状态，并实现重传
    //     var demoText = $('#demoText');
    //     demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
    //     demoText.find('.demo-reload').on('click', function(){
    //       uploadInst.upload();
    //     });
    //   }
    // });


    //多图片上传
    //  upload.render({
    //   elem: '#test2'
    //   ,url: '/backstage/resource/upload_image?folder_id={$folder_id}'
    //   ,multiple: true
    //   ,accept: 'file' //普通文件
    //   ,exts: 'jpg|jpeg|png|gif'
    //   ,before: function(obj){
    //     //预读本地文件示例，不支持ie8
    //     obj.preview(function(index, file, result){
    //       $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
    //     });
    //   }
    //   ,done: function(res){
    //     //上传完毕
    //   }
    // });


  });


  //创建监听函数
  var xhrOnProgress=function(fun) {
    xhrOnProgress.onprogress = fun; //绑定监听

    console.log('fun',fun);
    //使用闭包实现监听绑
    return function() {
      //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
      var xhr = $.ajaxSettings.xhr();
      //判断监听函数是否为函数
      if (typeof xhrOnProgress.onprogress !== 'function')
        return xhr;
      //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
      if (xhrOnProgress.onprogress && xhr.upload) {
        xhr.upload.onprogress = xhrOnProgress.onprogress;
      }
      return xhr;
    }
  }


</script>
</html>